<script setup>
import { ref } from 'vue'

//
const props = defineProps({
  memberList: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

<template>
  <div class="member">
    <div class="title">会员</div>
    <div class="list">
      <div class="item">
        <div class="username">用户名</div>
        <div class="phone">手机号</div>
        <div class="point">积分</div>
        <div class="creat-time">注册时间</div>
      </div>
      <div class="scroll">
        <div class="item mem" v-for="item in memberList" :key="item.id">
          <div class="username">{{ item?.nickName || '微信会员' }}</div>
          <div class="phone">{{ item?.phone || '' }}</div>
          <div class="point">{{ item?.points || '' }}</div>
          <div class="creat-time">{{ item?.createTime || '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.member {
  background-image: url('@/assets/images/box.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px 30px 40px 10px;
  .title {
    padding: 0 0 0 50px;
    color: #fff;
    font-size: 20px;
  }

  .list {
    padding: 0px 12px;
    div {
      text-align: center;
      color: #fff;
      overflow: hidden;
    }
    .scroll {
      position: relative;
      overflow: hidden;
    }
    @keyframes scrollTop {
      0% {
        transform: translateY(250px);
      }
      40% {
        transform: translateY(0);
      }
      60% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-250px);
      }
    }
    .mem {
      animation: scrollTop 8s linear infinite;
    }

    .item {
      .username {
        width: 180px;
      }
      .phone {
        width: 160px;
      }
      .point {
        width: 120px;
      }
      .creat-time {
        width: 190px;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
